<template>
    <div class="dashboard">
        <div class="dashboard-container">
            <el-aside class="navmenu">
                <el-menu
                    style="height: 100%"
                    :default-active="defaultActiveNav"
                    router
                >
                    <template v-for="item in navMenu">
                        <template v-if="item.subs">
                            <el-submenu :index="item.index" :key="item.index">
                                <template slot="title">
                                    <span slot="title">{{ item.title }}</span>
                                </template>
                                <template v-for="subItem in item.subs">
                                    <el-submenu
                                        v-if="subItem.subs"
                                        :index="subItem.index"
                                        :key="subItem.index"
                                    >
                                        <template slot="title">{{
                                            subItem.title
                                        }}</template>
                                        <el-menu-item
                                            v-for="(threeItem,
                                            i) in subItem.subs"
                                            :key="i"
                                            :index="threeItem.index"
                                            >{{ threeItem.title }}</el-menu-item
                                        >
                                    </el-submenu>
                                    <el-menu-item
                                        v-else
                                        :index="subItem.index"
                                        :key="subItem.index"
                                        >{{ subItem.title }}</el-menu-item
                                    >
                                </template>
                            </el-submenu>
                        </template>
                        <template v-else>
                            <el-menu-item :index="item.index" :key="item.index">
                                <span slot="title">{{ item.title }}</span>
                            </el-menu-item>
                        </template>
                    </template>
                </el-menu>
            </el-aside>

            <div class="mainpart">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "Dashboard",
    data() {
        return {
            // 当前页面导航栏选项
            navMenu: [],
            // 确定性预报导航栏选项
            DFnavMenu: [
                {
                    index: "normal",
                    title: "面向格点分析检验",
                    subs: [
                        {
                            index: "heightfield",
                            title: "高度场",
                        },
                        {
                            index: "temperaturefield",
                            title: "温度场",
                        },
                        {
                            index: "windfield",
                            title: "风场",
                        },
                    ],
                },
                {
                    index: "bufer",
                    title: "面向BUFR格式站点数据检验",
                    subs: [
                        {
                            index: "buferheightfield",
                            title: "高度场",
                        },
                        {
                            index: "bufertemperaturefield",
                            title: "温度场",
                        },
                        {
                            index: "buferwindfield",
                            title: "风场",
                        },
                    ],
                },
                {
                    index: "scorecard",
                    title: "综合评分卡",
                },
                {
                    index: "modulesetting",
                    title: "模块设置",
                },
            ],
            // 区域集合预报导航栏选项
            EFnavMenu: [
                {
                    index: "aroc",
                    title: "AROC"
                },
                {
                    index: "bs",
                    title: "BS",
                },
                {
                    index: "modulesetting",
                    title: "模块设置",
                },
            ],
            // 大气扩散系统导航栏选项
            ADnavMenu: [
                {
                    index: "windfield",
                    title: "风场图",
                },
                {
                    index: "concentration",
                    title: "浓度图",
                },
                {
                    index: "windfield-concentration",
                    title: "风场浓度图",
                },
                {
                    index: "modulesetting",
                    title: "模块设置",
                },
            ],
            defaultActiveNav: ''
        };
    },
    computed: {
        path(){
            return this.$route.path.split('/');
        },
    },
    mounted(){
        this.defaultActive();
    },
    methods: {
        // 根据路由决定左侧导航栏激活选项
        defaultActive(){
            // let _this = this;
            this.navMenu = [];
            // console.log(this.path[1], this.path[2]);
            this.defaultActiveNav = this.path[2];
            switch(this.path[1]){
                case 'global_deterministic': 
                    this.navMenu = this.DFnavMenu;
                    break;
                case 'grapes_reps': 
                    this.navMenu = this.EFnavMenu;
                    break;
                case 'ADdashboard': 
                    this.navMenu = this.ADnavMenu;
                    break;
                case 'grapes_region_determ':
                    this.navMenu = this.DFnavMenu;
                    break;
                default: 
                    this.$message({
                        type: 'warning',
                        message: '路由错误，请重试'
                    });
                    break;
            }
        }
    }
};
</script>

<style lang="scss" scoped>

</style>